<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="城市名称" prop="sname">
        <el-input v-model="queryParams.sname" placeholder="请输入城市名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="站点名" prop="stationName">
        <el-input v-model="queryParams.stationName" placeholder="请输入站点名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查找</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['base:platform:add']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['base:platform:edit']">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['base:platform:remove']">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['base:platform:export']">导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-upload" size="mini" @click="handleImport"
          v-hasPermi="['base:platform:add']">导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClear"
           v-hasPermi="['base:platform:remove']">清空数据
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-if="showImportError" type="danger" plain icon="el-icon-download" size="mini"
          @click="handleExportErrorData">导出错误数据</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-if="showImportError" type="danger" plain icon="el-icon-document-copy" size="mini"
          @click="handleCopyErrorData">复制到剪贴板</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <div v-loading="loading">
      <el-collapse v-model="activeNames" @change="handleCollapseChange">
        <el-collapse-item v-for="(city, index) in cityList" :key="'city-' + city.id + '-' + index"
          :name="String(city.id)">
          <template slot="title">
            <span style="font-weight: bold; font-size: 16px; margin-right: 10px;">{{ city.name || '未知城市' }}</span>
            <span style="color: #909399;">(共{{ city.platforms ? city.platforms.length : 0 }}个车站)</span>
          </template>

          <el-table :data="city.platforms" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="id" align="center" prop="id" />
            <el-table-column label="站点名" align="center" prop="stationName" />
            <el-table-column label="站点名拼音" align="center" prop="stationPinyin" />
            <el-table-column label="站点名首字母" align="center" prop="stationInitials" />
            <el-table-column label="车站类型" align="center" prop="stationType">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.stationType == 1">火车站</el-tag>
                <el-tag v-else-if="scope.row.stationType == 2">高铁站</el-tag>
                <el-tag v-else-if="scope.row.stationType == 3">综合站</el-tag>
                <el-tag v-else>火车站</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                  v-hasPermi="['base:platform:edit']">修改
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                  v-hasPermi="['base:platform:remove']">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>

      <el-empty v-if="cityList.length === 0" description="暂无数据"></el-empty>
    </div>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改车站管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="城市ID" prop="cityId">
          <el-select v-model="form.cityId" placeholder="请选择城市" filterable>
            <el-option v-for="city in allCities" :key="city.id" :label="city.name" :value="city.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点名" prop="stationName">
          <el-input v-model="form.stationName" placeholder="请输入站点名" @input="handleStationNameChange" />
        </el-form-item>
        <el-form-item label="站点名拼音" prop="stationPinyin">
          <el-input v-model="form.stationPinyin" :disabled="true" />
        </el-form-item>
        <el-form-item label="站点名首字母" prop="stationInitials">
          <el-input v-model="form.stationInitials" :disabled="true" />
        </el-form-item>
        <el-form-item label="车站类型" prop="stationType">
          <el-select v-model="form.stationType" placeholder="请选择车站类型">
            <el-option label="火车站" :value="1"></el-option>
            <el-option label="高铁站" :value="2"></el-option>
            <el-option label="综合站" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导入对话框 -->
    <el-dialog :title="title" :visible.sync="importOpen" width="400px" append-to-body>
      <div class="import-tip" style="margin-bottom: 15px;">
        <p style="margin: 0 0 10px 0;">请按以下格式准备Excel文件：</p>
        <el-card class="box-card" shadow="never">
          <div class="text item">
            <p style="margin: 5px 0;">1. ID（必须保留）：如 1890636568357368001</p>
            <p style="margin: 5px 0;"><span
                style="color: #F56C6C; font-weight: bold;">重要提示：请不要修改或删除ID字段，导入时必须保留原始ID</span>
            </p>
            <p style="margin: 5px 0;">2. 城市ID（必填）：如 1890636568357368878</p>
            <p style="margin: 5px 0;"><span style="color: #F56C6C;">注意：Excel中请将ID和城市ID列设置为文本格式，避免ID显示为科学计数法</span></p>
            <p style="margin: 5px 0;">3. 站点名（必填）：如 北京西站</p>
            <p style="margin: 5px 0;">4. 站点名拼音（选填）：如 beijingxizhan</p>
            <p style="margin: 5px 0;">5. 站点名首字母（选填）：如 bjxz</p>
            <p style="margin: 5px 0;">6. 车站类型（选填）：如 1-火车站，2-高铁站，3-综合站</p>
          </div>
        </el-card>
        <div style="margin-top: 10px; display: flex; gap: 10px;">
          <el-link type="primary" @click="showExampleImage">
            查看Excel模板示例
          </el-link>
          <el-link type="primary" @click="handleDownloadTemplate">
            下载Excel模板
          </el-link>
        </div>
      </div>
      <el-upload ref="upload" class="upload-demo" :action="uploadExcelUrl" :headers="headers"
        :on-success="handleExcelSuccess" :on-error="handleExcelError" :auto-upload="false" :before-upload="beforeUpload"
        :limit="1" :on-exceed="handleExceed" :on-change="handleFileChange" accept=".xlsx, .xls">
        <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"
          :disabled="!fileSelected">上传
        </el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件，且不超过5MB</div>
      </el-upload>
    </el-dialog>

    <!-- 添加示例图片对话框 -->
    <el-dialog title="Excel模板示例" :visible.sync="exampleImageVisible" width="700px" append-to-body>
      <div class="excel-example">
        <el-table :data="exampleData" border style="width: 100%" class="no-wrap-header">
          <el-table-column prop="id" label="ID" min-width="200" show-overflow-tooltip />
          <el-table-column prop="cityId" label="城市ID" min-width="200" show-overflow-tooltip />
          <el-table-column prop="stationName" label="站点名" min-width="100" show-overflow-tooltip />
          <el-table-column prop="stationPinyin" label="站点名拼音" min-width="120" show-overflow-tooltip />
          <el-table-column prop="stationInitials" label="站点首字母" min-width="100" show-overflow-tooltip />
          <el-table-column prop="stationType" label="车站类型" min-width="80" show-overflow-tooltip />
        </el-table>
      </div>
    </el-dialog>

    <!-- 清空对话框 -->
    <el-dialog :title="title" :visible.sync="clearOpen" width="500px" append-to-body>
      <el-form ref="clearForm" :model="clearForm" :rules="clearRules" label-width="80px">
        <el-form-item label="密码" prop="password">
          <el-input v-model="clearForm.password" type="password" placeholder="请输入登录密码" show-password />
          <div style="color: #F56C6C; font-size: 12px; margin-top: 8px;">提示：清空操作将删除所有车站数据且不可恢复，请谨慎操作！</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClearForm">确 定</el-button>
        <el-button @click="cancelClear">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listPlatform,
  getPlatform,
  delPlatform,
  addPlatform,
  updatePlatform,
  listPlatformByCity,
  clearPlatform
} from "@/api/base/platform";
import { listStation } from "@/api/base/station";
import { pinyin } from 'pinyin-pro';

export default {
  name: "Platform",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中数组
      stationNames: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 车站管理表格数据
      platformList: [],
      // 城市列表数据（含平台）
      cityList: [],
      // 所有城市列表（用于下拉选择）
      allCities: [],
      // 激活的折叠面板ID (使用数组类型)
      activeNames: [],
      // 示例图片对话框
      exampleImageVisible: false,
      exampleData: [{
        id: '1890636568357368001',
        cityId: '1890636568357368878',
        stationName: '北京西站',
        stationPinyin: 'beijingxizhan',
        stationInitials: 'bjxz',
        stationType: '1'
      }],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 导入对话框
      importOpen: false,
      // 上传地址
      uploadExcelUrl: process.env.VUE_APP_BASE_API + "/base/platform/importExcel",
      // 请求头
      headers: { 'Authorization': 'Bearer ' + this.$store.getters.token },
      // 禁止上传按钮
      fileSelected: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sname: '',
        stationName: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        cityId: [
          { required: true, message: "城市ID不能为空", trigger: "blur" }
        ],
        stationName: [
          { required: true, message: "站点名不能为空", trigger: "blur" }
        ],
        stationType: [
          { required: true, message: "车站类型: 1.火车站 2.高铁站 3.综合站不能为空", trigger: "change" }
        ],
      },
      // 导入错误数据
      importErrorData: [],
      // 是否显示导入错误按钮
      showImportError: false,
      // 清空对话框
      clearOpen: false,
      // 清空表单
      clearForm: {
        password: undefined
      },
      // 清空表单校验
      clearRules: {
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" }
        ]
      },
    };
  },
  created() {
    this.getList();
    this.getAllCities();
  },
  methods: {
    /** 下载模板操作 */
    handleDownloadTemplate() {
      this.download('base/platform/downloadTemplate', { ...this.queryParams }, `站点管理模板${new Date().getTime()}.xlsx`);
    },
    // 显示示例图片
    showExampleImage() {
      this.exampleImageVisible = true;
    },

    // 处理折叠面板变化
    handleCollapseChange(activeNames) {
      // 确保只有一个面板被激活
      if (activeNames.length > 1) {
        this.activeNames = [activeNames[activeNames.length - 1]];
      }
    },
    // 获取所有城市（用于表单选择）
    getAllCities() {
      listStation({ pageSize: 1000 }).then(response => {
        console.log(response,"!")
        this.allCities = response.rows || [];
      });
    },
    // 处理站点名变化
    handleStationNameChange(value) {
      if (value) {
        // 生成完整拼音（不带声调且不带空格）
        this.form.stationPinyin = pinyin(value, {
          toneType: 'none',
          type: 'string',
          nonZh: 'consecutive'
        }).replace(/\s/g, '');
        // 生成首字母（保持小写）
        this.form.stationInitials = pinyin(value, {
          pattern: 'first',
          toneType: 'none',
          type: 'string',
          nonZh: 'consecutive'
        }).replace(/\s/g, '').toLowerCase();
      } else {
        this.form.stationPinyin = '';
        this.form.stationInitials = '';
      }
    },
    /** 查询按城市分组的车站管理列表 */
    getList() {
      this.loading = true;
      listPlatformByCity(this.queryParams).then(response => {
        this.cityList = response.rows || [];
        console.log(response)
        console.log(this.cityList)

        this.total = response.total;
        this.loading = false;

        // 清空激活的折叠面板，确保所有面板默认关闭
        this.activeNames = [];
      }).catch(() => {
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        cityId: null,
        sname: '',
        stationName: null,
        stationPinyin: null,
        stationInitials: null,
        stationType: null,
        createdAt: null,
        updatedAt: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.stationNames = selection.map(item => item.stationName)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加站点管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPlatform(id).then(response => {
        this.form = response.data;
        if (response.data.stationType === '1') {
          this.form.stationType = '火车站'
        } else if (response.data.stationType === '2') {
          this.form.stationType = '高铁站'
        } else if (response.data.stationType === '3') {
          this.form.stationType = '综合站'
        }
        this.open = true;
        this.title = "修改站点管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePlatform(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPlatform(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      const stationNames=row.stationName || this.stationNames
      this.$modal.confirm('是否确认删除站点名称为"' + stationNames + '"的数据项？').then(function () {
        return delPlatform(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.importOpen = true;
      this.title = "数据导入";
      // 重置错误数据
      this.importErrorData = [];
      this.showImportError = false;
    },
    submitUpload() {
      this.$refs.upload.submit();
      this.importOpen = false;
    },
    // 上传成功回调
    handleExcelSuccess(res, file) {
      if (res.code === 200) {
        this.$modal.msgSuccess("上传Excel成功");
        this.importOpen = false;
        this.getList();
        // 清空错误数据
        this.importErrorData = [];
        this.showImportError = false;
      } else {
        // 处理唯一性校验失败的情况
        if (res.code === 500 && res.data) {
          // 保存错误数据，确保数据格式正确
          this.importErrorData = Array.isArray(res.data) ? res.data : [];

          // 检查错误数据并确保关键字段存在
          this.importErrorData = this.importErrorData.map(item => {
            // 创建一个新对象，保留原始字段
            const newItem = { ...item };

            // 确保ID字段有值
            if (newItem.id === undefined || newItem.id === null) {
              console.warn("错误数据缺少ID字段:", newItem);
            }

            // 确保其他必要字段
            if (newItem.cityId === undefined) newItem.cityId = '';
            if (newItem.stationName === undefined) newItem.stationName = '';
            if (newItem.stationPinyin === undefined) newItem.stationPinyin = '';
            if (newItem.stationInitials === undefined) newItem.stationInitials = '';
            if (newItem.stationType === undefined) newItem.stationType = '';
            if (newItem.errorMsg === undefined) newItem.errorMsg = '未知错误';

            return newItem;
          });

          this.showImportError = this.importErrorData.length > 0;

          // 展示错误消息摘要
          let errorMsg = `导入失败：发现${this.importErrorData.length}条错误记录，您可以点击"导出错误数据"或"复制到剪贴板"按钮进行查看和处理`;
          this.$modal.msgError({
            message: errorMsg,
            type: 'error',
            duration: 5000,
            showClose: true
          });
        } else {
          this.$modal.msgError(res.msg || "上传失败");
        }
      }
      this.$refs.upload.clearFiles();
    },

    // 上传前的文件校验
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isExcel) {
        this.$message.error('只能上传Excel文件!');
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过5MB!');
      }
      return isExcel && isLt5M;
    },

    // 上传失败回调
    handleExcelError(err, file) {
      this.$modal.msgError("上传Excel失败，请重试");
      this.$refs.upload.clearFiles(); // 清空已上传的文件列表
    },

    // 文件超出数量限制时的处理
    handleExceed(files, fileList) {
      this.$message.warning('只能上传一个文件');
    },
    handleFileChange(file, fileList) {
      this.fileSelected = fileList.length > 0;
    },
    /** 导出按钮操作 */
    handleExport() {
      // 创建一个新的对象，复制queryParams中的所有属性
      const exportParams = { ...this.queryParams };
      // 删除分页相关参数
      delete exportParams.pageNum;
      delete exportParams.pageSize;

      this.download('base/platform/export', exportParams, `站点管理_${new Date().getTime()}.xlsx`)
    },
    // 复制错误数据到剪贴板
    handleCopyErrorData() {
      if (!this.importErrorData || this.importErrorData.length === 0) {
        this.$message.error('没有错误数据可复制');
        return;
      }

      console.log("复制到剪贴板的错误数据:", this.importErrorData); // 调试日志

      // 创建表头
      const header = ['ID', '城市ID', '站点名', '站点名拼音', '站点名首字母', '车站类型', '错误原因'].join('\t');

      // 创建数据行
      const rows = this.importErrorData.map(item => {
        // 获取车站类型的文本
        const getStationTypeText = (type) => {
          switch (type) {
            case "1": return "火车站";
            case "2": return "高铁站";
            case "3": return "综合站";
            default: return type ? `类型${type}` : '';
          }
        };

        return [
          item.id || '',
          item.cityId || '',
          item.stationName || '',
          item.stationPinyin || '',
          item.stationInitials || '',
          getStationTypeText(item.stationType),
          item.errorMsg || ''
        ].join('\t');
      });

      // 组合表头和数据行
      const textData = [header, ...rows].join('\n');

      // 使用剪贴板API复制文本
      const textarea = document.createElement('textarea');
      textarea.value = textData;
      document.body.appendChild(textarea);
      textarea.select();

      try {
        document.execCommand('copy');
        this.$message({
          message: `成功复制${this.importErrorData.length}条错误数据到剪贴板`,
          type: 'success',
          duration: 3000
        });
      } catch (err) {
        this.$message.error('复制失败，请手动复制');
        console.error('复制失败:', err);
      } finally {
        document.body.removeChild(textarea);
      }
    },
    // 导出错误数据
    handleExportErrorData() {
      this.$modal.loading("正在导出数据，请稍候...");

      // 如果没有错误数据，则提示并返回
      if (!this.importErrorData || this.importErrorData.length === 0) {
        this.$modal.closeLoading();
        this.$modal.msgError("没有错误数据可导出");
        return;
      }

      console.log("导出的错误数据:", this.importErrorData); // 调试日志

      // 直接使用原始数据
      const formData = new FormData();
      formData.append("errorData", JSON.stringify(this.importErrorData));

      // 发送POST请求
      fetch(process.env.VUE_APP_BASE_API + "/base/platform/exportErrorData", {
        method: "POST",
        body: formData,
        headers: {
          "Authorization": "Bearer " + this.$store.getters.token
        }
      })
        .then(response => {
          if (response.ok) {
            return response.blob();
          }
          throw new Error("导出失败");
        })
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;
          a.download = "站点导入错误数据_" + new Date().getTime() + ".xlsx";
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          this.$modal.closeLoading();
        })
        .catch(error => {
          console.error("导出错误:", error);
          this.$modal.closeLoading();
          this.$modal.msgError("导出失败");
        });
    },
    // 处理文件上传进度
    handleFileUploadProgress(event, file) {
      this.upload.isUploading = true;
      console.log("上传进度:", event.percent);
    },
    // 提交文件表单
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 清空按钮操作 */
    handleClear() {
      this.clearOpen = true;
      this.title = "清空站点数据";
    },
    /** 提交清空表单 */
    submitClearForm() {
      this.$refs["clearForm"].validate(valid => {
        if (valid) {
          this.$modal.confirm('是否确认清空所有车站数据？').then(() => {
            return clearPlatform({ password: this.clearForm.password });
          }).then(response => {
            if (response.code === 200) {
              this.$modal.msgSuccess("清空成功");
              this.clearOpen = false;
              // 重置导入错误相关的状态
              this.importErrorData = [];
              this.showImportError = false;
              // 重置密码表单
              this.resetClearForm();
              this.getList();
            } else {
              this.$modal.msgError(response.msg || "清空失败");
            }
          }).catch(error => {
            console.error("清空失败:", error);
            this.$modal.msgError("清空失败：" + (error.msg || "未知错误"));
          });
        }
      });
    },
    /** 取消清空 */
    cancelClear() {
      this.clearOpen = false;
      this.resetClearForm();
    },
    /** 重置清空表单 */
    resetClearForm() {
      this.clearForm = {
        password: undefined
      };
      this.resetForm("clearForm");
    },
  }
};
</script>

<style scoped>
.custom-collapse {
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.custom-collapse-header {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 48px;
  padding: 0 15px;
  background-color: #FFF;
  cursor: pointer;
  border-bottom: 1px solid #EBEEF5;
}

.custom-collapse-header .el-icon-arrow-right {
  margin-right: 10px;
  transition: transform .3s;
}

.custom-collapse-header .el-icon-arrow-right.is-active {
  transform: rotate(90deg);
}

.custom-collapse-content {
  padding: 10px;
  background-color: #FFF;
}

.city-header {
  display: flex;
  align-items: center;
  flex: 1;
}

.city-name {
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
}

.station-count {
  color: #909399;
  font-size: 14px;
}

.import-error-dialog ::v-deep .el-dialog__body {
  padding: 20px;
}

.error-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.error-summary {
  display: flex;
  align-items: center;
  font-size: 15px;
}

.error-actions {
  display: flex;
  gap: 10px;
}

::v-deep .el-table .warning-row {
  background: #fdf5e6;
}

::v-deep .el-table .error-row {
  background: #fef0f0;
}

.excel-example .el-table th>.cell {
  white-space: nowrap;
}
</style>
